<template>
  <div class="music-player-container" :class="{ 'is-playing': isPlaying }">
    <!-- 音乐信息区域 -->
    <div class="music-info">
      <img :src="music.cover" alt="专辑封面" class="music-cover" :class="{ 'rotating': isPlaying }">
      <div class="music-details">
        <h3 class="music-title">{{ music.title }}</h3>
        <p class="music-artist">{{ music.artist }}</p>
      </div>
      <button class="favorite-btn" :class="{ 'favorited': isFavorite }" @click="toggleFavorite">
        <i class="icon-heart"></i>
      </button>
    </div>

    <!-- 播放控制区域 -->
    <div class="playback-controls">
      <button class="control-btn shuffle-btn" :class="{ 'active': isShuffle }" @click="toggleShuffle">
        <i class="icon-shuffle"></i>
      </button>
      <button class="control-btn prev-btn" @click="playPrevious">
        <i class="icon-prev"></i>
      </button>
      <button class="control-btn play-pause-btn" @click="togglePlayPause">
        <i v-if="isPlaying" class="icon-pause"></i>
        <i v-else class="icon-play"></i>
      </button>
      <button class="control-btn next-btn" @click="playNext">
        <i class="icon-next"></i>
      </button>
      <button class="control-btn repeat-btn" :class="{ 'active': isRepeat, 'repeat-one': isRepeatOne }" @click="toggleRepeat">
        <i class="icon-repeat"></i>
      </button>
    </div>

    <!-- 进度条和时间显示 -->
    <div class="progress-container">
      <span class="current-time">{{ formatTime(currentTime) }}</span>
      <div class="progress-bar-wrapper">
        <div class="progress-bar">
          <div class="progress-filled" :style="{ width: progressPercentage + '%' }"></div>
          <div class="progress-handle" :style="{ left: progressPercentage + '%' }"></div>
        </div>
      </div>
      <span class="total-time">{{ formatTime(duration) }}</span>
    </div>

    <!-- 音量控制 -->
    <div class="volume-container">
      <button class="volume-btn" @click="toggleMute">
        <i v-if="volume === 0" class="icon-volume-mute"></i>
        <i v-else-if="volume < 50" class="icon-volume-low"></i>
        <i v-else class="icon-volume-high"></i>
      </button>
      <div v-if="showVolumeSlider" class="volume-slider-wrapper">
        <input 
          v-model="volume" 
          type="range" 
          class="volume-slider" 
          min="0" 
          max="100" 
          @input="changeVolume"
        >
      </div>
    </div>

    <!-- 播放列表切换 -->
    <button class="playlist-toggle-btn" @click="togglePlaylist">
      <i class="icon-playlist"></i>
    </button>
  </div>

  <!-- 播放列表弹出层 -->
  <div v-if="showPlaylist" class="playlist-overlay">
    <div class="playlist-container">
      <div class="playlist-header">
        <h3>播放列表</h3>
        <button class="close-playlist-btn" @click="togglePlaylist">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="playlist-content">
        <ul class="playlist-items">
          <li 
            v-for="item in playlist" 
            :key="item.id"
            class="playlist-item" 
            :class="{ active: item.id === currentMusicId }"
            @click="playMusic(item.id)"
          >
            <img :src="item.cover" alt="专辑封面" class="playlist-item-cover">
            <div class="playlist-item-info">
              <h4 class="playlist-item-title">{{ item.title }}</h4>
              <p class="playlist-item-artist">{{ item.artist }}</p>
            </div>
            <span class="playlist-item-time">{{ formatTime(item.duration) }}</span>
          </li>
        </ul>
      </div>
      <div class="playlist-footer">
        <button v-if="playlist.length > 0" class="clear-playlist-btn" @click="clearPlaylist">
          <i class="fa fa-trash"></i>
          清空列表
        </button>
        <button v-if="playlist.length > 0" class="save-playlist-btn" @click="savePlaylist">
          <i class="fa fa-save"></i>
          保存列表
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicPlayer',
  props: {
    musicId: {
      type: String,
      default: '1',
    },
    playlist: {
      type: Array,
      default: () => [
        {
          id: '1',
          title: '春日漂流',
          artist: '轻音乐',
          cover: '/src/assets/周杰伦.png',
          url: 'https://www.w3schools.com/html/horse.mp3',
          duration: 240,
        },
        {
          id: '2',
          title: '夏日微风',
          artist: '钢琴曲',
          cover: '/src/assets/二次元美食节海报_3.jpg',
          url: 'https://www.w3schools.com/html/horse.mp3',
          duration: 210,
        },
        {
          id: '3',
          title: '秋日私语',
          artist: '吉他曲',
          cover: '/src/assets/周杰伦.png',
          url: 'https://www.w3schools.com/html/horse.mp3',
          duration: 180,
        },
        {
          id: '4',
          title: '冬日恋歌',
          artist: '小提琴',
          cover: '/src/assets/悟空.jpg',
          url: 'https://www.w3schools.com/html/horse.mp3',
          duration: 225,
        },
        {
          id: '5',
          title: '星空漫步',
          artist: '电子音乐',
          cover: '/src/assets/黑悟空.jpg',
          url: 'https://www.w3schools.com/html/horse.mp3',
          duration: 195,
        },
      ],
    },
    initialVolume: {
      type: Number,
      default: 80,
    },
  },
  data() {
    return {
      // 音频元素引用
      audio: null,
      // 音乐信息
      music: {
        id: '1',
        title: '春日漂流',
        artist: '轻音乐',
        cover: '/src/assets/二次元美食节海报_3.jpg',
        url: 'https://www.w3schools.com/html/horse.mp3',
        duration: 240,
      },
      // 当前播放的音乐ID
      currentMusicId: '',
      // 播放状态
      isPlaying: false,
      // 当前播放时间
      currentTime: 0,
      // 总时长
      duration: 0,
      // 音量
      volume: this.initialVolume,
      // 是否静音
      isMuted: false,
      // 播放模式
      isShuffle: false,
      isRepeat: false,
      isRepeatOne: false,
      // 播放定时器
      playTimer: null,
      // 音量滑块显示状态
      showVolumeSlider: false,
      // 播放列表显示状态
      showPlaylist: false,
      // 是否正在拖拽进度条
      isDragging: false,
      // 收藏状态
      isFavorite: false,
      // 播放次数
      playCount: 0,
      // 上传时间
      uploadTime: '2023-10-15',
    }
  },
  computed: {
    // 进度百分比
    progressPercentage() {
      if (this.duration === 0) return 0
      return (this.currentTime / this.duration) * 100
    },
  },
  watch: {
    // 监听音乐ID变化，加载新音乐
    musicId(newId) {
      if (newId && newId !== this.currentMusicId) {
        this.loadMusic(newId)
      }
    },
    // 监听播放列表变化，更新当前播放状态
    playlist(newPlaylist) {
      if (newPlaylist.length === 0) {
        this.stopPlayback()
      } else if (!this.getCurrentMusicInPlaylist()) {
        // 如果当前播放的音乐不在播放列表中，则播放列表的第一首
        this.loadMusic(newPlaylist[0].id)
      }
    },
    // 监听音量变化
    volume(newVolume) {
      if (this.audio) {
        this.audio.volume = newVolume / 100
      }
      if (newVolume > 0) {
        this.isMuted = false
      }
    },
    // 监听静音状态变化
    isMuted(newMuted) {
      if (this.audio) {
        this.audio.muted = newMuted
      }
    },
  },
  created() {
    // 初始化音频元素
    this.initAudio()
  },
  mounted() {
    // 加载初始音乐
    this.loadMusic(this.musicId)
    // 监听全局点击事件，隐藏音量滑块
    document.addEventListener('click', this.handleGlobalClick)
  },
  beforeUnmount() {
    // 清理定时器和事件监听
    this.stopPlayTimer()
    if (this.audio) {
      this.audio.pause()
      this.audio.removeEventListener('timeupdate', this.handleTimeUpdate)
      this.audio.removeEventListener('ended', this.handlePlayEnd)
      this.audio.removeEventListener('loadedmetadata', this.handleMetadataLoaded)
    }
    document.removeEventListener('click', this.handleGlobalClick)
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
  },
  methods: {
    // 初始化音频元素
    initAudio() {
      this.audio = new Audio()
      this.audio.volume = this.volume / 100
      this.audio.addEventListener('timeupdate', this.handleTimeUpdate)
      this.audio.addEventListener('ended', this.handlePlayEnd)
      this.audio.addEventListener('loadedmetadata', this.handleMetadataLoaded)
    },

    // 加载音乐
    loadMusic(musicId) {
      const musicData = this.findMusicById(musicId)
      if (musicData) {
        this.music = musicData
        this.currentMusicId = musicId
        this.currentTime = 0
        
        // 更新音频源
        if (this.audio) {
          this.audio.src = musicData.url
          this.audio.load()
        }
      }
    },

    // 根据ID查找音乐
    findMusicById(id) {
      return this.playlist.find(music => music.id === id)
    },

    // 获取当前音乐在播放列表中的索引
    getCurrentMusicIndex() {
      return this.playlist.findIndex(music => music.id === this.currentMusicId)
    },

    // 检查当前音乐是否在播放列表中
    getCurrentMusicInPlaylist() {
      return this.playlist.some(music => music.id === this.currentMusicId)
    },

    // 切换播放/暂停
    togglePlayPause() {
      if (this.isPlaying) {
        this.pausePlayback()
      } else {
        this.startPlayback()
      }
    },

    // 开始播放
    startPlayback() {
      if (this.audio && this.music.url) {
        this.audio.play().then(() => {
          this.isPlaying = true
          this.startPlayTimer()
          this.playCount++
        }).catch(error => {
          console.error('播放失败:', error)
          // 模拟播放效果，避免因浏览器策略无法自动播放的问题
          this.isPlaying = true
          this.startPlayTimer()
          this.playCount++
        })
      }
    },

    // 暂停播放
    pausePlayback() {
      if (this.audio) {
        this.audio.pause()
      }
      this.isPlaying = false
      this.stopPlayTimer()
    },

    // 停止播放
    stopPlayback() {
      if (this.audio) {
        this.audio.pause()
        this.currentTime = 0
      }
      this.isPlaying = false
      this.stopPlayTimer()
    },

    // 播放上一首
    playPrevious() {
      if (this.playlist.length === 0) return
      
      let index = this.getCurrentMusicIndex()
      if (this.isShuffle) {
        // 随机播放时，随机选择一首（不包括当前播放的）
        const availableIndexes = this.playlist.map((_, i) => i).filter(i => i !== index)
        index = availableIndexes.length > 0 ? availableIndexes[Math.floor(Math.random() * availableIndexes.length)] : 0
      } else {
        // 顺序播放时，播放上一首
        index = index > 0 ? index - 1 : this.playlist.length - 1
      }
      
      this.loadMusic(this.playlist[index].id)
      if (this.isPlaying) {
        this.startPlayback()
      }
    },

    // 播放下一首
    playNext() {
      if (this.playlist.length === 0) return
      
      let index = this.getCurrentMusicIndex()
      if (this.isShuffle) {
        // 随机播放时，随机选择一首
        index = Math.floor(Math.random() * this.playlist.length)
      } else {
        // 顺序播放时，播放下一首
        index = (index + 1) % this.playlist.length
      }
      
      this.loadMusic(this.playlist[index].id)
      if (this.isPlaying) {
        this.startPlayback()
      }
    },

    // 从播放列表中播放指定音乐
    playMusic(musicId) {
      this.loadMusic(musicId)
      if (!this.isPlaying) {
        this.startPlayback()
      }
    },

    // 开始播放定时器（用于模拟播放效果）
    startPlayTimer() {
      if (this.playTimer) {
        clearInterval(this.playTimer)
      }
      this.playTimer = setInterval(() => {
        // 只有在实际音频未加载或无法播放时才使用模拟进度
        if (!this.audio || this.audio.paused && this.isPlaying) {
          this.currentTime += 1
          // 检查是否播放完毕
          if (this.currentTime >= this.duration) {
            this.handlePlayEnd()
          }
        }
      }, 1000)
    },

    // 停止播放定时器
    stopPlayTimer() {
      if (this.playTimer) {
        clearInterval(this.playTimer)
        this.playTimer = null
      }
    },

    // 处理播放结束
    handlePlayEnd() {
      if (this.isRepeatOne) {
        // 单曲循环
        this.currentTime = 0
        if (this.audio) {
          this.audio.currentTime = 0
        }
        this.startPlayback()
      } else if (this.isRepeat) {
        // 列表循环，播放下一首
        this.playNext()
      } else if (this.isShuffle) {
        // 随机播放
        this.playRandom()
      } else {
        // 顺序播放，播放下一首
        this.playNext()
      }
    },

    // 随机播放
    playRandom() {
      if (this.playlist.length === 0) return
      
      let randomIndex
      const currentIndex = this.getCurrentMusicIndex()
      
      // 如果只有一首歌，直接播放
      if (this.playlist.length === 1) {
        randomIndex = 0
      } else {
        // 随机选择一首，不包括当前播放的（如果有的话）
        do {
          randomIndex = Math.floor(Math.random() * this.playlist.length)
        } while (randomIndex === currentIndex)
      }
      
      this.loadMusic(this.playlist[randomIndex].id)
      this.startPlayback()
    },

    // 切换收藏状态
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      // 在实际应用中，这里应该调用API保存收藏状态
      console.log(this.isFavorite ? '已收藏' : '取消收藏')
    },

    // 切换随机播放
    toggleShuffle() {
      this.isShuffle = !this.isShuffle
      // 随机播放时取消列表循环和单曲循环
      if (this.isShuffle) {
        this.isRepeat = false
        this.isRepeatOne = false
      }
    },

    // 切换重复播放
    toggleRepeat() {
      if (!this.isRepeat) {
        this.isRepeat = true
        this.isRepeatOne = false
        this.isShuffle = false
      } else if (this.isRepeat && !this.isRepeatOne) {
        this.isRepeatOne = true
      } else {
        this.isRepeat = false
        this.isRepeatOne = false
      }
    },

    // 获取重复播放状态的标题
    getRepeatTitle() {
      if (this.isRepeatOne) {
        return '单曲循环'
      } else if (this.isRepeat) {
        return '列表循环'
      } else {
        return '顺序播放'
      }
    },

    // 切换静音
    toggleMute() {
      this.isMuted = !this.isMuted
    },

    // 改变音量
    changeVolume() {
      // 音量变化由watch处理
    },

    // 切换音量滑块显示
    toggleVolumeSlider() {
      this.showVolumeSlider = !this.showVolumeSlider
    },

    // 切换播放列表显示
    togglePlaylist() {
      this.showPlaylist = !this.showPlaylist
    },

    // 清空播放列表
    clearPlaylist() {
      this.$emit('update:playlist', [])
      this.stopPlayback()
    },

    // 保存播放列表（模拟）
    savePlaylist() {
      // 在实际应用中，这里应该调用API保存播放列表
      alert('播放列表已保存！')
    },

    // 格式化时间显示
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.floor(seconds % 60)
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    },

    // 格式化数字（支持万和亿）
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      } else {
        return num.toString()
      }
    },

    // 处理音频时间更新
    handleTimeUpdate() {
      if (this.audio && !this.isDragging) {
        this.currentTime = this.audio.currentTime
        this.duration = this.audio.duration || this.duration
      }
    },

    // 处理音频元数据加载完成
    handleMetadataLoaded() {
      if (this.audio) {
        this.duration = this.audio.duration
      }
    },

    // 处理进度条点击
    handleProgressClick(e) {
      if (this.isDragging) return
      
      const progressBar = e.target.closest('.progress-bar')
      if (progressBar) {
        const rect = progressBar.getBoundingClientRect()
        const clickPosition = (e.clientX - rect.left) / rect.width
        const newTime = clickPosition * this.duration
        
        this.currentTime = newTime
        if (this.audio) {
          this.audio.currentTime = newTime
        }
      }
    },

    // 开始拖拽进度条
    startDragging(e) {
      e.stopPropagation()
      this.isDragging = true
      
      // 添加鼠标移动和释放事件监听
      document.addEventListener('mousemove', this.handleMouseMove)
      document.addEventListener('mouseup', this.handleMouseUp)
      
      // 立即更新进度
      this.updateProgressFromMouse(e)
    },

    // 处理鼠标移动（拖拽进度条时）
    handleMouseMove(e) {
      if (this.isDragging) {
        this.updateProgressFromMouse(e)
      }
    },

    // 处理鼠标释放（拖拽进度条时）
    handleMouseUp() {
      if (this.isDragging) {
        this.isDragging = false
        document.removeEventListener('mousemove', this.handleMouseMove)
        document.removeEventListener('mouseup', this.handleMouseUp)
        
        // 更新音频播放位置
        if (this.audio) {
          this.audio.currentTime = this.currentTime
        }
      }
    },

    // 根据鼠标位置更新进度
    updateProgressFromMouse(e) {
      const progressBar = this.$el.querySelector('.progress-bar')
      if (progressBar) {
        const rect = progressBar.getBoundingClientRect()
        let clickPosition = (e.clientX - rect.left) / rect.width
        
        // 限制在0-1范围内
        clickPosition = Math.max(0, Math.min(1, clickPosition))
        
        this.currentTime = clickPosition * this.duration
      }
    },

    // 处理全局点击事件，隐藏音量滑块
    handleGlobalClick(e) {
      if (!e.target.closest('.volume-container')) {
        this.showVolumeSlider = false
      }
    },
  },
}
</script>

<style scoped>
/* 音乐播放器容器 */
.music-player-container {
  background: linear-gradient(135deg, #FB7299 0%, #23ADE5 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* 音乐信息区域 */
.music-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.music-cover {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* 专辑封面旋转动画 */
.music-cover.rotating {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.music-details {
  flex: 1;
}

.music-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.music-title:hover {
  color: rgba(255, 255, 255, 0.8);
}

.music-artist {
  font-size: 14px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.music-stats {
  font-size: 12px;
  opacity: 0.8;
}

.separator {
  margin: 0 6px;
}

.favorite-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.favorite-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.favorite-btn.favorited {
  color: #ff4757;
  animation: heartBeat 0.3s ease;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 进度条和时间显示 */
.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  cursor: pointer;
}

.current-time,
.total-time {
  font-size: 14px;
  min-width: 48px;
  text-align: center;
  user-select: none;
}

.progress-bar-wrapper {
  flex: 1;
  position: relative;
}

.progress-bar {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.progress-bar:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.progress-filled {
  height: 100%;
  background-color: white;
  border-radius: 3px;
  transition: width 0.1s ease;
  position: relative;
}

.progress-handle {
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.progress-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 播放控制区域 */
.playback-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.control-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 12px;
  font-size: 16px;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* 播放/暂停按钮更大更突出 */
.play-pause-btn {
  width: 56px;
  height: 56px;
  background-color: white;
  color: #FB7299;
  font-size: 24px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(251, 114, 153, 0.4);
}

.play-pause-btn:hover {
  background-color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(251, 114, 153, 0.5);
}

/* 激活状态的按钮 */
.control-btn.active {
  color: #ff4757;
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 音量控制 */
.volume-container {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.volume-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.volume-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.volume-slider-wrapper {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 12px;
  border-radius: 8px;
  margin-left: 8px;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.volume-slider {
  width: 120px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  transition: background 0.3s ease;
}

.volume-slider:hover {
  background: rgba(255, 255, 255, 0.4);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 播放列表切换按钮 */
.playlist-toggle-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.playlist-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.playlist-count {
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* 播放列表弹出层 */
.playlist-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.playlist-container {
  background-color: var(--card-bg);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.playlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

.playlist-header h3 {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  margin: 0;
}

.close-playlist-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-playlist-btn:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.playlist-content {
  flex: 1;
  overflow-y: auto;
  max-height: calc(80vh - 150px);
}

.playlist-content::-webkit-scrollbar {
  width: 8px;
}

.playlist-content::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.playlist-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.playlist-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

.playlist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid var(--border-color);
  animation: fadeIn 0.3s ease;
}

.playlist-item:hover {
  background-color: var(--hover-color);
  transform: translateX(4px);
}

.playlist-item.active {
  background-color: rgba(251, 114, 153, 0.1);
  border-left: 3px solid var(--bilibili-pink);
  padding-left: 13px;
}

.playlist-item-cover {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.playlist-item-info {
  flex: 1;
  min-width: 0;
}

.playlist-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-item-artist {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-item-time {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.playlist-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

.clear-playlist-btn,
.save-playlist-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.clear-playlist-btn:hover {
  border-color: #ff4757;
  color: #ff4757;
  background-color: rgba(255, 71, 87, 0.05);
}

.save-playlist-btn:hover {
  border-color: var(--bilibili-pink);
  color: var(--bilibili-pink);
  background-color: rgba(251, 114, 153, 0.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .music-player-container {
    border-radius: 0;
    width: 100%;
    max-width: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 16px;
  }
  
  .music-info {
    margin-bottom: 16px;
    gap: 12px;
  }
  
  .music-cover {
    width: 64px;
    height: 64px;
  }
  
  .music-title {
    font-size: 18px;
  }
  
  .music-artist {
    font-size: 12px;
  }
  
  .playback-controls {
    margin-bottom: 16px;
    gap: 12px;
  }
  
  .progress-container {
    margin-bottom: 16px;
  }
  
  .play-pause-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .volume-slider-wrapper {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
  }
  
  .playlist-container {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    border-radius: 0;
  }
  
  .playlist-toggle-btn {
    top: 16px;
    right: 16px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .music-player-container {
    padding: 12px;
  }
  
  .music-info {
    gap: 10px;
  }
  
  .music-cover {
    width: 56px;
    height: 56px;
  }
  
  .music-title {
    font-size: 16px;
  }
  
  .music-artist {
    font-size: 11px;
  }
  
  .playback-controls {
    gap: 8px;
  }
  
  .control-btn {
    padding: 10px;
    font-size: 14px;
  }
  
  .play-pause-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .volume-btn {
    font-size: 16px;
  }
  
  .volume-slider-wrapper {
    padding: 8px;
  }
  
  .volume-slider {
    width: 100px;
  }
}

/* 自定义重复播放图标 */
.fa-repeat-one {
  position: relative;
}

.fa-repeat-one::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 4px;
  height: 4px;
  background-color: #ff4757;
  border-radius: 50%;
}
</style>